<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../public/public.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>管理平台</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<script type="text/javascript">
		var TAB_ID = "tab_id";
		var _currTab; 

		$(document).ready(function(){
			initPage();// 初始化左侧导航
			initTab();// 初始加载主页
			setTabContextEvent(); // 设置Tab标签页事件
			
			// 修改密码保存
			$('#btnOk').click(function () { 
			       savepwd();
			});
			// 修改密码取消
			$('#btnCancel').click(function () {
			       $('#w_editpwd').window('close');
		    }); 
		});
		
		
		//初始化左侧导航菜单
		function initPage() {
		    $("#menu_accordion").accordion({ animate: false });
		    
		    // 获取数据并绑定
		    $.getJSON(basePath + '/login/navi.do', function (data) {
		        //$('#spanUser').text(data.user);
		        var _menus = data;
		        $.each(_menus, function (i, n) {
		        	var id = n.menuId;
		            $('#menu_accordion').accordion('add', {
		            	animate: true,
		                title: n.text,
		                content: '<ul style="padding-left:25px" id="'+id+'"></ul>',//tree style
		                iconCls: n.iconCls
		            });
		            $('#'+id).tree({
		            	style:{height:800},
		            	animate: true,
		            	data: n.children,//data格式参见官网doc
		            	onClick: function(node){
		            		var attrs = node.attributes;
		            		if (attrs == null || attrs.url.length <= 0)
		            			return;
		            		var url = attrs.url.indexOf('http://') >= 0 ? attrs.url : basePath + attrs.url;
		            		addTabPage(node.id, node.text, url, node.iconCls, true);
		            	}
		            });
		        });
		    }).success(function(){})
		    .error(function() { $.messager.alert('操作提示', '导航菜单加载失败，请联系系统管理员！', 'warning'); })
		    .complete(function() { 
		        //选中第一个
		        $('#menu_accordion').accordion('select', 0);
		    });
		}
		
		// 创建标签页
		function addTabPage(id, subtitle, url, icon, closable) {
		    // 判断防止重复创建tab
			if (!$('#frm_center').tabs('exists', subtitle)){
				$('#frm_center').tabs('add', {
		        	id: 'tab_' + id,
		            title: subtitle,
		            content: createFrame(url),
		            closable: closable,
		            icon: icon
		        });
		    } else {
		    	$('#frm_center').tabs('select', subtitle);
		    }
		    setTab($('.tabs-selected .tabs-inner'), subtitle, closable); // 设置Tab标签页
		}
		
		//初始化首页
		function initTab() {
			//加载系统首页
			addTabPage('tab_main', '首页', '${ctx}/login/toWelcome.as', 'icon-home', false);

			//选择tab页时，同时切换左侧导航
			$('#frm_center').tabs({
				onSelect: function (title,index) { // 选择tab页时，同时切换左侧导航
			        if (_currTab != title && index > 0) { // 防止点击当前tab执行此事件
			            $('.tree-node-selected').removeClass('tree-node-selected');
			            var $treenode = $('.tree-node span:contains('+title+')').map(function(){
			            	if ($(this).text() == title) {
			            		return this;
			            	}
			            });
			            if($treenode) {
			            	$treenode.parents('div .tree-node').addClass('tree-node-selected');
			                var t = $treenode.parents('div .panel').find('div .panel-title').text(); // 根元素文本
			                $('#menu_accordion').accordion('select', t);
			            }
			            _currTab = title;
			        }
			    }
			});
		}

		// 设置标签页  $tabhandler 标签页控制;subtitle 标签页标题; closable 是否可关闭
		function setTab($tabhandler, subtitle, closable) {
			$tabhandler.dblclick(function() { // 双击关闭TAB选项卡
				if (closable) {
					$('#frm_center').tabs('close', subtitle);
				}
			}).bind('contextmenu', function(e) { // 为选项卡绑定右键
				e.preventDefault();
				var $contextmenu = $('#contextmenu');
				var itemclose = $contextmenu.menu('findItem', '关闭标签页');
				if (!closable) {
					$contextmenu.menu('disableItem', itemclose.target);
				} else {
					$contextmenu.menu('enableItem', itemclose.target);
				}
				$contextmenu.menu('show', {
					left : e.pageX,
					top : e.pageY
				});
				$('#frm_center').tabs('select', subtitle);
				return false;
			});
		}

		// 返回嵌入标签页代码
		function createFrame(url) {
			return '<iframe scrolling="auto" frameborder="0" src="' + url
					+ '" style="width:100%; height:100%;"></iframe>';
		}

		// 绑定右键菜单事件
		function setTabContextEvent() {
			$('#contextmenu').menu(
			{
				onClick : function(item) {
					// 在关闭标签页的时候，main页面(index为0的主页)不关闭
					var $curTab = $('#frm_center').tabs('getSelected');
					var index = $('#frm_center').tabs('getTabIndex', $curTab);
					var tablength = $('#frm_center').tabs('tabs').length;
					switch (item.name) {
						case 'update':// 重新载入
							var url = $($curTab.panel('options').content).attr('src');
							if (url) {
								$('#frm_center').tabs('update', {
								tab : $curTab,
								options : {
									content : createFrame(url)
								}
								});
							}
							break;
						case 'close':// 关闭标签页(当前)
							$('#frm_center').tabs('close', index);
							break;
						case 'closeall':// 关闭全部
							for ( var i = tablength - 1; i > 0; i--)
								$('#frm_center').tabs('close', i);
							break;
						case 'closeother':// 关闭其他标签页
							for ( var i = tablength - 1; i > 0; i--) {
								if (i == index)
								continue;
								$('#frm_center').tabs('close', i);
							}
							break;
						case 'closeright':// 关闭右侧标签页
							for ( var i = tablength - 1; i > index; i--)
								$('#frm_center').tabs('close', i);
							break;
						case 'closeleft':// 关闭左侧标签页
							for ( var i = index - 1; i > 0; i--)
								$('#frm_center').tabs('close', i);
							break;
						default:// 退出右键
							$('#contextmenu').menu('hide');
							break;
						}
					}
			});
		}

		//系统退出
		function logout() {
			$.messager.confirm('操作提示', '确定退出系统？', function(r) {
				if (r) {
					window.top.location.href = "${ctx}/login/exit.as";
				}
			});
		}
		
		//修改密码
		function editPwd() {
			$('#w_editpwd').window('open');
			$('#oldpwd').val('');
			$('#newpwd').val('');
			$('#repwd').val('');
		}

		//修改密码-保存操作
		function savepwd() {
			var $oldpwd = $('#oldpwd');
			var $newpwd = $('#newpwd');
			var $repwd = $('#repwd');

			if (!$oldpwd.validatebox('isValid')
					|| !$newpwd.validatebox('isValid')
					|| !$repwd.validatebox('isValid')) {
				return false;
			}
			if ($newpwd.val() != $repwd.val()) {
				$.messager.alert('操作提示', '新密码确认密码不一致，请重新输入！', 'warning');
				return false;
			}
			var params = {};
			params.oldpwd = $oldpwd.val();
			params.newpwd = $newpwd.val();
			params.renewpwd = $repwd.val();
			$.post('${ctx}/sysUser/editPwd.do', params, function(result) {
				if (result.success) {
					$oldpwd.val('');
					$newpwd.val('');
					$repwd.val('');
					$('#w_editpwd').window('close');
					$.messager.alert('操作提示', result.opMsg, 'info');
				}
				if(result.success == false){
					$.messager.alert('操作提示', result.opMsg, 'warning');
				}
			});
		}
	</script>
	
</head>

<body class="easyui-layout" id="wrap">
        <div id="headDiv" data-options="region:'north'" style="height:82px">
        	<div class="header">
		    	<img src="${ctx}/image/logo-main.png" class="logo" style="margin:15px 15px;" />
		        <div class="header-info">
		        	<img src="${ctx}/image/icon-login-user.png" class="left" />
		          		  尊敬的  
		          		  <font color="#8B0000">
		          		  	<c:choose>
		          		  		<c:when test="${sessionScope.authedUserName}==null">未登录的</c:when>
		          		  		<c:otherwise>${sessionScope.authedUserName}</c:otherwise>
		          		  	</c:choose>
		          		  </font>
		          		 用户，您好！
		        </div>
		        <div class="header-right-btns">
		        	<a id="logout" onclick="logout();">
		                <img src="${ctx}/image/icon-header-logout.png" /><br/>
		              	  安全退出
		            </a>
		            <a id="changePwd" onclick="editPwd();">
		                <img src="${ctx}/image/icon-header-lock.png" /><br/>
		             	   修改密码
		            </a >
		        </div>
		    </div>
        </div>
        <div id="frm_menu" name="frm_menu" data-options="region:'west',split:true"  title="<span style='color:#4169E1;font-size:14px'>系统菜单</span>" style="width:240px;">
        	<div id="menu_accordion" class="easyui-accordion" fit="true" border="false" style="overflow:hidden;"></div>
        </div>
        <div id="frm_center" name="frm_center" class="easyui-tabs" style="width:100%;height:100%;overflow-y:auto;overflow-x:auto;" data-options="region:'center',iconCls:'icon-ok'">
        </div>
 	
 		<!--标签页上的右键菜单-->
	    <div id="contextmenu" class="easyui-menu" style="width: 150px;">
	        <div name="update">重新载入</div>
	        <div class="menu-sep"></div>
	        <div name="close">关闭标签页</div>
	        <div name="closeall">关闭全部标签页</div>
	        <div name="closeother">关闭其他标签页</div>
	        <div name="closeright">关闭右侧标签页</div>
	        <div name="closeleft">关闭左侧标签页</div>
	        <div class="menu-sep"></div>
	        <div name="exit">退出右键</div>
	    </div>
	    
	    <!--修改密码窗口-->
	    <div id="w_editpwd"  class="easyui-window"  data-options="title:'修改密码',maximizable:false,closed:true,minimizable:false,collapsible:false,width:480,modal:true,height:250,resizable:false">
			<table  style="margin-top:20px;" width="100%" cellspacing="0" cellpadding="0">
			    <tr>
			        <td style="text-align: center; height: 30px; line-height: 30px;">原始密码：</td>
			        <td>
			        	<input class="easyui-validatebox" type="password" id="oldpwd" data-options="required:true"></input>
			        </td>
			    </tr>
			    <tr>
			        <td style="text-align: center; height: 30px; line-height: 30px;">新的密码：</td>
			        <td>
			        	<input class="easyui-validatebox" type="password" id="newpwd" data-options="required:true,validType:'length[5,20]'"></input>
			        </td>
			    </tr>
			    <tr>
			        <td style="text-align: center; height: 30px; line-height: 30px;">确认密码：</td>
			        <td>
			        	<input class="easyui-validatebox" type="password" id="repwd" data-options="required:true,validType:'length[5,20]'"></input>
			        </td>
			    </tr>
			</table>
			<div style="padding-left:130px;padding-top:10px;">
				<a href="javascript:void(0);" id="btnOk" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
				<a href="javascript:void(0);" id="btnCancel" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
			</div>
	    </div>
     
</body>
</html>